<script setup lang="ts">
  import { ref } from 'vue'
  import { ElTooltip, ElButton } from 'element-plus'
  import { SIcon } from '@xtail/vue3'
  import { CollapseBtnPropsType } from './types'

  defineOptions({
    name: 'XCollapseBtn'
  })

  withDefaults(defineProps<CollapseBtnPropsType>(), {
    iconProps: {} as any,
    btnProps: {} as any,
    click: () => {},
    collapse: false,
    disabled: false,
    tooltipProps: {} as any
  })

  const elTooltipRef = ref()
  const elBtn = ref()
  defineExpose({
    elTooltipRef,
    elBtn
  })
</script>

<template>
  <el-tooltip
    ref="elTooltipRef"
    class="x-collapse-btn"
    v-bind="{
      ...tooltipProps,
      disabled: !collapse || disabled
    }"
  >
    <template #default>
      <slot name="btn">
        <el-button
          ref="elBtn"
          v-bind="{
            ...btnProps,
            plain: btnProps?.plain ?? true
          }"
          @click="(evt: MouseEvent) => click(evt)"
        >
          <template #icon>
            <slot name="btn-icon">
              <s-icon v-bind="iconProps" />
            </slot>
          </template>
          <template v-if="text && !collapse" #default>
            <slot name="btn-text">
              {{ text }}
            </slot>
          </template>
        </el-button>
      </slot>
    </template>
    <template #content>
      <slot name="tooltip">
        {{ text }}
      </slot>
    </template>
  </el-tooltip>
</template>

<style lang="scss">
  @use './style' as *;
</style>
